<template>
	<div class="classify">
		<div class="header">
			<input type="text" placeholder="亚当星球">
		</div>
		<div class="main">
			<div class="main_left">
				<div v-for="(item,index) in list" :key="item.id">
					<p @click="changeCid(item,index)" :class="index === cid ?'active':'' ">
						{{item.groupName}}
					</p>
					<div class="goodsGroupEntities" v-if="item.goodsGroupEntities.length>0 && flag">
						<div>
							<p v-for="(el,le) in item.goodsGroupEntities" :key="el.id" @click="changeCindex(el,le)" :class="le===cindex ?'tive':'' ">
								<span>{{el.groupName}}</span>
							</p>
						</div>
					</div>
				</div> 
				
			</div>
			<div class="main_right">
				<div class="imgs">
					<img :src="list[cid].headImgUrl" @click="goAllDetail(list[cid].id)" v-if="cid!==1" alt="">
					<img :src="list[cid].goodsGroupEntities[cindex].headImgUrl" @click="goAllDetail(list[cid].goodsGroupEntities[cindex].id)" v-if="cid===1" alt="">
				</div>
				<div class="shoplist">
					<div v-if="cid!==1 && !flag" class="lis1">
						<dl v-for="(item) in allShopList" :key="item.id">
							<dt>
								<img :src="item.smallImgUrl" alt="">
							</dt>
							<dd>{{item.groupName}}</dd>
						</dl>
					</div>

					<div v-if="cid===1" class="lis2">
						<div v-for="(item) in shopList2" :key="item.id">
							<p>{{item.groupName}}</p>
							<div v-for="(el) in item.dtoList" :key="el.id">
								<img :src="el.smallImgUrl" alt="">
								<p>{{el.groupName}}</p>
							</div>
						</div>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</template>


<script>
import {getGroupLeft,getGroupRight,getRecomment} from '../../server/index';
export default {
	data() {
		return {
			list:[],
			cid:0,
			cindex:0,
			flag:false,
			allShopList:[],
			shopList2:[]
		}
	},
	async onLoad() {
		let res = await getGroupLeft();
		this.list = res.result;
		let res2 = await getGroupRight();
		this.allShopList = res2.result;
		let res3 = await getRecomment();
		this.shopList2 = res3.result;
	},
	methods: {
		// 改变外层下标
		async changeCid(item,index){
			this.cid = index;
			if(index === 1){
				this.flag = !this.flag;
				// let res2 = await getGroupRight({id:this.list[this.cid].goodsGroupEntities[this.cindex].id});
				// this.shopList2 = res2.result;
			}else{
				this.flag = false;
				let res2 = await getGroupRight({id:item.id});
				this.allShopList = res2.result;
			}
		},
		// 改变内层下标
		async changeCindex(item,index){
			this.cindex = index;
			let res2 = await getGroupRight({id:item.id});
			this.shopList2 = res2.result;
		},
		// 去详情页面
		goAllDetail(id){
			wx.navigateTo({
				url: `/pages/classify/allShopDetail?id=${id}`,
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.classify{
	width: 100%;
	height: 100%;
	overflow: hidden;
	.header{
		width: 100%;
		height: 100rpx;
		input{
			width: 75%;
			height: 60%;
			background: #eee;
			border-radius: 30rpx;
			padding-left: 20rpx;
			margin-left: 20rpx;
		}
	}
	.main{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		.main_left{
			width: 200rpx;
			height: 100%;
			overflow: auto;
			background: #eee;
			>div{
				width: 100%;
				font-size: 32rpx;
				>p{
					width: 100%;
					text-align: center;
					line-height: 100rpx;
					color: rgba(102,102,102,1);
				}
				.active{
					background: white;
					color: black;
					font-weight: bold;
				}
				.goodsGroupEntities{
					width: 100%;
					height: 700rpx;
					overflow: hidden;
					animation: identifier 1s 1;
					div{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						background: white;
						p{
							width: 100%;
							height: 100rpx;
							line-height: 100rpx;
							text-align: center;
							color: rgba(102,102,102,1);
							span{
								display: inline-block;
								height: 40rpx;
								line-height: 40rpx;
							}
						}
					}
					
					.tive{
						span{
							width: 95%;
							border-left: solid 2px rgba(204,151,86,1);
							color: rgba(204,151,86,1);
						}
					}
				}
				@keyframes identifier {
					from{
						height: 0;
					}
					to{
						height: 700rpx;
					}
				}
				
			}
			
		}
		.main_right{
			flex: 1;
			border-right: solid 1px #ccc;
			height: 100%;
			box-sizing: border-box;
			padding: 0 16rpx;
			overflow: auto;
			.imgs{
				width: 100%;
				height: 240rpx;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.shoplist{
				width: 100%;
				margin-top: 20rpx;
				margin-bottom: 100rpx;
				.lis1{
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					flex-direction: left;
					dl{
						width: 31%;
						height: 200rpx;
						font-size: 26rpx;
						text-align: center;
						img{
							width: 100%;
							height: 150rpx;
						}
					}
				}
				
				.lis2{
					width: 100%;
					>div{
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						margin-top: 20rpx;
						p{
							width: 100%;
							height: 60rpx;
							text-align: center;
						}
						>div{
							width: 31%;
							height: 200rpx;
							font-size: 26rpx;
							text-align: center;
							img{
								width: 100%;
								height: 150rpx;
							}
						}
					}
				}
			}
		}
	}
}
</style>
